.search-filters__dropdown-filters {
	align-items: center;
	border-left: 1px solid var( --color-neutral-10 );
	height: 51px; // same as .search
	z-index: z-index( 'root', '.search' );

	// Move the filter so its "inside" the
	// search input
	body.is-section-signup & {
		position: absolute;
		top: 0;
		right: 0;
	}

	.button {
		align-items: center;
		border-radius: 0 3px 3px 0;
		display: flex;
		flex-direction: column;
		font-weight: normal;
		height: 100%;
		justify-content: center;
		padding: 0 1em;
		transition: 0.1s all linear;
		width: 100%;

		&.is-borderless {
			&:hover,
			&:focus {
				border-color: transparent;
				box-shadow: 0 0 0 3px var( --color-accent-light ), -1px 0 0 3px var( --color-accent-light );
			}
		}

		.gridicon {
			top: 0;
			margin-right: 0;

			@include breakpoint( '<660px' ) {
				top: 2px;
			}
		}

		.search-filters__dropdown-filters-button-text {
			line-height: 1.2;

			@include breakpoint( '<660px' ) {
				display: none;
			}
		}
	}

	&.search-filters__dropdown-filters--is-open {
		box-shadow: 0 0 0 1px var( --color-primary ), 0 0 0 4px var( --color-primary-light );
	}

	&.search-filters__dropdown-filters--has-filter-values {
		.button.is-borderless {
			color: var( --color-accent );
		}
	}
}

.search-filters__popover {
	width: 28em;

	// Use increased specificty to override default z-index for popovers
	&.popover {
		z-index: z-index( '.popover', '.search-filters__popover' );
	}

	.popover__inner {
		padding: 2em;
	}

	.form-fieldset {
		text-align: left;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.validation-fieldset {
		margin-bottom: 1em;
	}
	.validation-fieldset__validation-message {
		min-height: initial;
	}
}



.search-filters__buttons,
.search-filters__checkboxes {
	display: flex;
	flex-flow: row;
	overflow: hidden;
	align-items: center;

	.button {
		flex: 1 0 auto;
		margin-left: 1em;
		&:first-child {
			margin-left: 0;
		}

		&.search-filters__button--is-placeholder {
			animation: loading-fade 1.6s ease-in-out infinite;
			background-color: var( --color-neutral-0 );
			color: transparent;
			height: 40px;
		}
	}

	// Increase specificity to override button styles in signup
	body.is-section-signup .layout & {
		button.search-filters__tld-button,
		button.search-filters__popover-button {
			font-size: 14px;
			padding-top: 0.5em;
			padding-bottom: 0.5em;
		}

		button.search-filters__popover-button-domain-step-test {
			flex: 1 0 auto;
			margin-left: 2em;
			
			&.is-active {
				color: var( --color-accent );
				background-color: unset;
				border-width: 1px 1px 2px;
			}
		}

		legend.search-filters__filter-by {
			font-size: 14px;
			color: var( --color-neutral-30 );
		}
	}

	.search-filters__tld-checkbox-filter-bar {
		display: flex;
		flex: 1 0 auto;
		justify-content: space-around;
		font-size: 14px;

		@include breakpoint( '<480px' ) {
			flex-grow: 0;
		}

		.search-filters__tld-checkbox {
			display: flex;
			align-items: center;
			margin-left: 2em;

			&:last-child {
				margin-right: 0;
			}

			& .form-checkbox {
				font-size: 14px;
			}

			& span {
				margin-left: 1em;
			}
		}
	}

	@include breakpoint( '<960px' ) {
		&.is-compact {
			padding-bottom: 0.5em;
		}

		.button {
			margin-bottom: 0.5em;
		}

		.search-filters__tld-button:nth-child( n + 7 ),
		.search-filters__tld-checkbox:nth-child( n + 7 ) {
			display: none;
		}
	}

	@include breakpoint( '<800px' ) {
		.search-filters__tld-button:nth-child( n + 5 ),
		.search-filters__tld-checkbox:nth-child( n + 5 ) {
			display: none;
		}
	}

	@include breakpoint( '<660px' ) {
		.search-filters__tld-button:nth-child( n + 4 ),
		.search-filters__tld-checkbox:nth-child( n + 3 ) {
			display: none;
		}
	}

	@include breakpoint( '<480px' ) {
		.search-filters__tld-button:nth-child( n + 2 ),
		.search-filters__tld-checkbox:nth-child( n + 2 ) {
			display: none;
		}
	}
}

.search-filters__popover-button .gridicon {
	margin-left: 2px;
}

.search-filters__text-input-fieldset .search-filters__label {
	margin-bottom: 0.25em;
}

.search-filters__checkboxes-fieldset .search-filters__label {
	margin-bottom: 1em;

	&:last-of-type {
		margin-bottom: 0;
	}
}

.search-filters__token-field-fieldset {
	.token-field__token {
		&:first-child {
			margin-left: 0;
		}
	}
	.token-field__token-text,
	.token-field__remove-token {
		background: var( --color-surface );
		color: var( --color-neutral-50 );
		border: 1px solid var( --color-neutral-10 );
	}
	.token-field__token-text {
		border-right: none;
	}
	.token-field__remove-token {
		border-left: none;

		&:hover {
			background: var( --color-neutral-10 );
			color: var( --color-neutral-50 );
		}
	}

	.token-field__input-container {
		margin-left: 0.4em;
		margin-right: 0.4em;
	}

	input[type='text'].token-field__input {
		margin-left: 0;
	}

	.token-field__suggestions-list.is-expanded {
		padding-top: 0;
		overflow-y: scroll;
	}

	.token-field__suggestion-match {
		color: inherit;
	}

	.token-field__suggestion {
		color: var( --color-neutral-70 );
		&.is-selected span {
			color: var( --color-text-inverted );
		}
	}
}
